<template>
  <el-main>
    <!--  查询条件-->
    <el-form :model="searchModel" ref="searchForm" label-width="80px" :inline="true" size="small">
      <el-form-item>
        <el-input v-model="searchModel.orderNumber" placeholder="请输入订单编号"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" size="mini" icon="el-icon-search" @click="search(pageNo,pageSize)">查询</el-button>
        <el-button size="mini" icon="el-icon-refresh-right" @click="resetValue()">重置</el-button>
      </el-form-item>
    </el-form>
    <!--  订单表格数据-->
    <el-table :height="tableHeight" :data="ordersList" border stripe style="width: 100%;margin-bottom: 10px">
      <el-table-column label="自习室图片" width="100px" align="center">
        <template slot-scope="scope">
          <el-image style="width: 80px; height: 80px" :src="scope.row.providerIcon" fit="fill"
                    :preview-src-list="[scope.row.providerIcon]"/>
        </template>
      </el-table-column>
      <el-table-column align="center" width="150px" prop="providerName" label="自习室名称"></el-table-column>
      <el-table-column align="center" width="200px" prop="orderNumber" label="自习室编号"></el-table-column>
<!--      <el-table-column align="center" width="80px" prop="orderCount" label="订单数量"></el-table-column>-->
<!--      <el-table-column align="center" width="250px" prop="userAddress" label="收货地址"></el-table-column>-->
      <el-table-column align="center" width="150px" prop="userPhone" label="联系方式"></el-table-column>
      <el-table-column align="center" width="150px" prop="userName" label="预约人"></el-table-column>
<!--      <el-table-column align="center" width="100px" prop="orderTotal" label="订单金额"></el-table-column>-->
      <el-table-column align="center" prop="orderStatus" label="预约状态">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.orderStatus===0" size="normal">未确定预约</el-tag>
          <el-tag type="success" v-else-if="scope.row.orderStatus===1" size="normal">已确认</el-tag>
          <el-tag type="warning" v-else-if="scope.row.orderStatus===2" size="normal">未确认</el-tag>
          <el-tag type="success" v-else-if="scope.row.orderStatus===3" size="normal">已预约</el-tag>
          <el-tag type="info" v-else-if="scope.row.orderStatus===4" size="normal">已完成</el-tag>
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作">
        <template slot-scope="scope">
          <el-button icon="el-icon-delete" type="danger" size="mini" @click="handleDelete(scope.row)"
                     v-if="hasPermission('sys:order:delete')">删除
          </el-button>
          <el-button icon="el-icon-sell" type="primary" size="mini" @click="handleSend(scope.row)"
                     v-if="hasPermission('sys:order:send')">完成预约
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--    分页工具-->
    <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
                   :current-page="pageNo" :page-sizes="[10,20,30,40,50]" :page-size="10"
                   layout="total,sizes,prev,pager,next,jumper" :total="total">
    </el-pagination>
  </el-main>
</template>
<script>
//导入接口
import ordersApi from '@/api/order'
//导入对话框组件
import SystemDialog from "@/components/system/SystemDialog.vue";
//导入权限判断
import hasPermission from "@/permission/index";

export default {
  name: "orderList",
  //注册组件
  components: {
    SystemDialog
  },
  data() {
    return {
      //查询条件
      searchModel: {
        orderNumber: '',//订单编号
        pageNo: 1,//当前页
        pageSize: 10,//每页显示条数
        userId: this.$store.getters.userId,//用户ID
      },
      ordersList: [],//订单列表
      tableHeight: 0,//表格高度
      pageNo: 1,//当前页
      pageSize: 10,//每页显示条数
      total: 0,//总条数
    }
  },
  methods: {
    hasPermission,
    //查询订单列表
    async search(pageNo = 1, pageSize = 10) {
      this.searchModel.pageNo = pageNo;//当前页
      this.searchModel.pageSize = pageSize;//每页显示条数
      //发送查询请求
      let res = await ordersApi.getOrderListApi(this.searchModel);
      // console.log(res)
      //判断是否成功
      if (res.success) {
        this.ordersList = res.data.records;//表格数据
        this.total = res.data.total;//总条数
      }
    },
    /**
     * 改变每页显示条数触发
     * @param size
     */
    handleSizeChange(size) {
      this.pageSize = size;//每页显示条数
      this.search(this.pageNo, size);
    },
    /**
     * 改变页码触发
     * @param page
     */
    handleCurrentChange(page) {
      this.pageNo = page;//当前页
      this.search(page, this.pageSize);
    },
    /**
     * 删除订单
     * @param row
     */
    async handleDelete(row) {
      let confirm = await this.$myconfirm("确定取消预约吗？");
      if (row.orderStatus === 1 || row.orderStatus === 2 || row.orderStatus === 3){
        this.$message.error("已确认预约不能随意删除")
      }else {
        if (confirm) {
          // 封装条件
          let params = {id: row.id}
          //发送删除请求
          let res = await ordersApi.deleteOrderApi(params);
          //判断是否成功
          if (res.success) {
            this.$message.success(res.message)//提示成功
            await this.search(this.pageNo, this.pageSize);//查询数据
          } else {
            this.$message.error(res.message)//提示失败
          }
        }
      }
    },
    /**
     * 发货
     * @param row
     */
    async handleSend(row) {
      if (row.orderStatus === 0) {
        this.$message.error("请先确认")
      }
      if (row.orderStatus === 1 || row.orderStatus === 2) {
        let confirm =await this.$myconfirm("确定预约吗？");
        if (confirm) {
          // 发送发货请求
          let res = await ordersApi.sendOrderApi(row);
          //判断是否成功
          if (res.success) {
            this.$message.success(res.message)//提示成功
            await this.search(this.pageNo, this.pageSize);//查询数据
          } else {
            this.$message.error(res.message)//提示失败
          }
        }
      }
    },
    /**
     * 重置查询条件
     */
    resetValue() {
      //清空表单数据
      this.searchModel.orderNumber = "";
      //重新查询
      this.search();
    },
  },
  created() {
    //查询订单列表
    this.search();
  },
  mounted() {
    this.$nextTick(() => {
      //获取表格高度
      this.tableHeight = window.innerHeight - 220;
    })
  },
}
</script>
